<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const tansferPath = (toPath) => {
  router.push({
    path: toPath
  })
}
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
  switch (key) {
    case "1":
      tansferPath("/home")
      break
    case "2-1":
      tansferPath("/problem")
      break
    case "2-2":
      tansferPath("/login")
      break
  }
}
</script>

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

    <el-menu-item index="1">首页</el-menu-item>
    <el-sub-menu index="2">
      <template #title>功能2</template>
      <el-menu-item index="2-1">答题卡</el-menu-item>
      <el-menu-item index="2-2">登录页</el-menu-item>
      <el-menu-item index="2-3">功能2-3(未开发)</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>功能2-4(未开发)</template>
        <el-menu-item index="2-4-1">功能2-4-1(未开发)</el-menu-item>
        <el-menu-item index="2-4-2">功能2-4-2(未开发)</el-menu-item>
        <el-menu-item index="2-4-3">功能2-4-3(未开发)</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>功能3(未开发)</el-menu-item>
    <el-menu-item index="4">功能4(未开发)</el-menu-item>
  </el-menu>
  <router-view></router-view>
</template>

<style scoped></style>
